{include file='head'/}
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-inline">
                    <select name="pid" lay-verify="" lay-search>
                        {volist name='pid_list' id='vo'}
                        <option value="{$vo.id}" {if ($id eq $vo.id)}selected{/if}>{$vo.title}</option>
                        {/volist}
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单类型</label>
                <div class="layui-inline">
                    <select name="type" lay-verify="" lay-search>
                        <option value="0" selected>目录</option>
                        <option value="1">菜单</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="title" lay-verify="required" autocomplete="off"
                           placeholder="请输入菜单名称"
                           class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单地址</label>
                <div class="layui-input-block">
                    <input type="text" name="node" id="node" lay-verify="required" autocomplete="off"
                           placeholder="请输入菜单地址"
                           class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-block">
                    <input type="text" name="icon" id="iconPicker2" value="" lay-filter="iconPicker2">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单排序</label>
                <div class="layui-inline">
                    <input type="number" name="sort" id="sort" lay-verify="required" autocomplete="off"
                           placeholder="请输入菜单排序"
                           class="layui-input" value="100">
                </div>
                【越小越靠前】
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" title="启用" checked>
                    <input type="radio" name="status" value="0" title="禁用">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="admin-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

{include file='footer'/}
<script>
  layui.use(['form', 'jquery', 'iconPicker'], function () {
    let form = layui.form;
    let $ = layui.jquery;
    let iconPicker = layui.iconPicker;

    iconPicker.render({
      elem: '#iconPicker2',
      type: 'fontClass',
      style: 'color: #5FB878;',
      placeholder: '',
      isSplit: true,
      search: true,
      page: false,
      limit: 16,
      click: function(data) {
        console.log(data);
      },
      success: function(d) {
        console.log(d);
      }
      ,ready: function () {
      }
    });

    /*iconPicker.render({
      elem: '#iconPicker2'
      , type: 'fontClass'
      , style: 'color: #5FB878;'
      , placeholder: ''
      , isSplit: true
      , page: false
      , search: true
      , click: function (obj) {
        console.log(obj)
      }
      , ready: function () {
      }
    });*/

    form.on('submit(admin-save)', function (data) {
      $.ajax({
        url: "{:__url('system/authmenu/add')}",
        data: JSON.stringify(data.field),
        dataType: 'json',
        contentType: 'application/json',
        type: 'post',
        success: function (res) {
          if (res.code === 200) {
            hui_msg(res.msg, 1, function () {
              window.location.reload();
            });
          } else {
            hui_msg(res.msg, 2);
          }
        }
      })
      return false;
    });

  })
</script>
<script>
</script>
</body>
</html>
